<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,p,span,ul,li,ol,dl,dt,dd,h3{margin: 0;padding: 0;}
			li{list-style: none;}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix{
				content: " ";
				display:block;
				clear: both;
			}
			.clearfix{
				zoom: 1;
				overflow: hidden;
			}
			.box{
				width: 560px;
				border:1px solid #006400;
				margin:  50px auto;
				color: #333;
			}
			.companyName,.delivery,.ems-bott{
				margin: 10px 20px;
			}
			.companyType{
				display: inline-block;
				border: 1px solid #ccc;
				border-top: 1px solid #bbb;
				text-indent:20px;
				margin-left: 20px;
				width: 188px;
				height: 26px;
			}
			.companyType i{
				display: inline-block;
				width: 16px;
				height: 16px;
				margin: 5px;
				vertical-align: middle;
				background: url(images/ems.png) no-repeat;
				background-position: 0px -16px;
			}
			.companyType span{
				display: inline-block;
				width: 26px;
				height: 26px;
				border-left: 1px solid #ccc;
				
				background: #fefefe;
				float: right;
			}
			.deliveryVal{
				display: inline-block;
				margin-left: 20px;
			}
			.deliveryVal input{
				border: 1px solid #ccc;
				height: 26px;
				line-height: 24px;
				padding-left: 8px;
				outline: none;
			}
			.searchBtn{
				display: inline-block;
				background:deepskyblue;
				color: #fff;
				height: 30px;
				line-height: 30px;
				padding:0px 10px;
			}
			.company_info{
				margin-left: 10px;
			}
			.company_info button{
				border: 1px solid #ccc;
				background: none;
				padding: 5px 3px;
				font-size: 12px;
				margin-top: 8px;
			}
			.data a{
				text-decoration: none;
				color: #AAAAAA;
				font-size: 12px;
			}
			.data a:hover{
				text-decoration: underline;
			}
			.ems_mid ul li{
				padding: 10px 10px 10px 50px;
				border-bottom: 1px solid #eee;
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="companyName">
				<span>公司名称</span>
				<p class="companyType">
					<i></i>
					申通快递
					<span></span>
				</p>
			</div>
			<div class="delivery">
				<span>快递单号</span>
				<p class="deliveryVal">
					<input type="text" id="deliveryval"/>
					<span class="searchBtn">查询</span>
				</p>
			</div>
			
			<!--
				数据源
			-->
			<div class="ems_mid">
	            <ul id="emsListBox">
	                <!--<li>
	                    <div class="time">2017年10月17日 上午10:50:40</div>
	                    <div class="info">湖南长沙青山分部-颜小龙-派件中</div>
	                </li> -->
	            </ul>
       		</div>
			
			
			<div class="ems-bott clearfix">
				<img src="images/ems2.png" class="fl"  style="margin: 5px;"/>
				<div class="company_info fl">
					<h3>申通快递</h3>
					<p>
						官网地址:
						<a href="http://www.sto.cn/">www.sto.cn</a>
					</p>
					<p>客服电话：95543</p>
					<button style="margin-right:10px;">网点查询</button>
					<button>网上寄件</button>
				</div>
				<div class="data clearfix fr">
					<img src="images/ems3.png" />
					<a href="http://www.sto.cn/">数据来源申通快递</a>
				</div>
			</div>
		</div>
		
		<script>
			window.onload = function(){
				var aSearchBtn = document.getElementsByClassName("searchBtn")[0];
				var oBeliveryval = document.getElementById('deliveryval');
				
				aSearchBtn.onclick = function(){
					var val = oBeliveryval.value;
					if(val){
						reqEmsData(val);
					}else{
						alert("请输入快递单号")
					}
				}
				
				function reqEmsData(val){
					var xhr;
					if(window.XMLHttpRequest){
						xhr = new XMLHttpRequest();
					}else{
						try{
							xhr = new ActiveXObject("Msxml2.XMlHTTP.6.0");
						}catch(error){
							xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
						}
					}
				  xhr.open("GET","ems.json?"+val,true);
				  xhr.send(null);
				  xhr.onreadystatechange = function(){
				  	console.log(xhr.readyState)
				  	if(xhr.readyState==4){
				  		if (xhr.status == 200) {
				  			//console.log(xhr.responseText);
				  			//console.log(JSON.parse(xhr.responseText))
				  			var res = JSON.parse(xhr.responseText)
				  			var info = res.data.info.context;
				  			success_res(info);
				  		}
				  		
				  	}
				  }
				}
				
				function success_res(info){
					var oEmsListBox = document.getElementById('emsListBox');
					for (var i = 0; i < info.length; i++) {
						
						var li = document.createElement("li");
						var timeDiv = document.createElement("div");
						var infoDiv = document.createElement("div");
						
						timeDiv.className = 'time';
						infoDiv.className = "info";
						
						if(i==0){
							li.style.color = "red";
						}
						
						
						var time  = info[i].time;
						//console.log(time)
						var d = new Date(Number(time+"000"));
						var Year = d.getFullYear();
		                var Mon = d.getMonth()+1;
		                var Dat = d.getDate();
		                var Hours = d.getHours();
		                var Mins = d.getMinutes();
		                var Secs = d.getSeconds();
						var val = Hours>12?"下午":"上午";
						var timeDetail = formatnumber(Year) +"年" + formatnumber(Mon) +"月" +formatnumber(Dat) +"日" +" "+ val+" " +formatnumber(Hours)+"时"+formatnumber(Mins)+"分"+formatnumber(Secs)+"秒";
						
						
						timeDiv.innerText = timeDetail;
						infoDiv .innerHTML = info[i].desc;
						
						li.appendChild(timeDiv);
						li.appendChild(infoDiv);
						oEmsListBox.appendChild(li);
					}
				}
				function formatnumber(num){
					var num = Number(num);
					return num>=10?num:"0"+num;
				}
			}
		</script>
	</body>
</html>
